import React,{Component,PropTypes} from 'react';
import {redirect,backward} from 'lib/utils';
import OssUpload from "components/OssUpload";
import Baselist from 'components/Baselist';
import Crumb from 'components/Crumb'
import API,{} from 'lib/api';

import {Card,Tabs,Form, Select, Input, InputNumber, Button} from 'antd';
import banner from 'images/banner.png';
import './style.less';

const FormItem = Form.Item;
const Option = Select.Option;

class AddCategory extends Component{
    constructor(props){
        super(props);

        this.state={
            hasImg:true ,       // 有图片
            crumb:[
                {href:"/",title:"首页"},
                {href:"/",title:"商品分类"},
                {href:"/",title:"添加分类"}
            ]
        }
    };


    componentWillMount(){
        /* 请求分类数据 */
        /* API.fetch("",{id:id},resp=>{  */
            const category = [
                {name:"水果",value:"fruits"},
                {name:"零食",value:'snacks'},
                {name:"文具",value:'stationery'},
            ];

            this.setState({category:category});
        /* })*/
    }


    componentDidMount(){

        if(this.props.routeParams.id){  // 编辑分类
            const initData = {  category:"橘子",
                                level:"fruits",
                                rank:"0",
                                exhibition:"show",
                                img:banner
                            };
            this.props.form.setFieldsValue(initData);
            this.setState({ img:banner})
        };


    }


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }else {
                //  必传图片的错误信息提示,是否显示
                if(err.img){
                    this.setState({hasImg:false})
                }else{
                    this.setState({hasImg:true})
                }
            }
        });
    };


    handlerPic(field){
        this.props.form.setFieldsValue({
            img: field
        });

        // ++ 图片上传操作后,对错误信息提示的处理
        let hasImg = false
        field?hasImg = true:null

        this.setState({
            img:field,
            hasImg:hasImg
        })
    }




    render(){
        const { getFieldDecorator } = this.props.form;
        const {hasImg,category} = this.state;
        return(
            <Baselist>
                <Crumb crumb={this.state.crumb}/>
                <Card title="分类信息" noHovering={true}>
                    <Form onSubmit={this.handleSubmit} className="common-info">
                        <FormItem
                            label="分类名称"
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 8 }}
                        >
                            {getFieldDecorator('category', {
                                rules: [{ required: true, message: '请输入商品名称' }],
                            })(
                                <Input placeholder="请输入商品名称"/>
                            )}
                        </FormItem>


                        <FormItem
                            label="父集"
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 8 }}
                        >
                            {getFieldDecorator('level', {
                                rules: [{ required: false, message: '' }],
                            })(
                                <Select onChange={this.handleSelectChange}
                                        placeholder="请选择分类父集"
                                >
                                    {
                                        category?
                                            category.map((item,idx)=>(
                                                <Option key={idx} value={item.value}>{item.name}</Option>
                                            ))
                                        :null
                                    }

                                </Select>
                            )}
                        </FormItem>

                        <FormItem
                            label="排序"
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 8 }}
                        >
                            {getFieldDecorator('rank', {
                                rules: [{ required: true, message: '请输入分类排序' }],
                            })(
                                <InputNumber precision={0} placeholder="请输入分类排序" />
                            )}
                        </FormItem>

                        <FormItem
                            label="是否显示"
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 8 }}
                        >
                            {getFieldDecorator('exhibition', {
                                initialValue:"show",
                                rules: [{ required: false, message: '请选择是否显示' }],
                            })(
                                <Select
                                    placeholder="请选择是否显示"
                                    onChange={this.handleSelectChange}
                                >
                                    <Option value="show">显示</Option>
                                    <Option value="hidden">隐藏</Option>
                                </Select>
                            )}
                        </FormItem>

                        <FormItem style={{marginBottom:6}}>
                            {getFieldDecorator('img', {
                                rules: [{ required: true, message: ' ' }],
                            })(
                                <OssUpload default={this.state.img}
                                           onFieldSet={this.handlerPic.bind(this)}
                                           multiple={false}
                                           lable="选择图片"
                                />
                            )}
                        </FormItem>
                        {/*  原有图片上传的必填提示信息,位置不好修改所以另起一行做提示  */}
                        <div className="ant-row ant-form-item oss-upload_elem" style={{visibility:hasImg?"hidden":"visible"}}>
                            <label className="ant-form-item-label ant-col-xs-24 ant-col-sm-4">  </label>
                            <div className="ant-col-8 ant-form-item-control-wrapper" style={{color: "#f04134"}}>请选择图片</div>
                        </div>

                        <FormItem
                            wrapperCol={{ span: 8, offset: 4 }}
                        >
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                        </FormItem>
                    </Form>
                </Card>
            </Baselist>

        )
    }
};

export default Form.create()(AddCategory);